window.addEventListener('load', function () {
    // 获取元素
    var focus = document.querySelector('.focus');
    var chevron_left = document.querySelector('.chevron-left');
    var chevron_right = document.querySelector('.chevron-right');
    var focusWidth = focus.offsetWidth;

    chevron_left.style.display = 'none';
    chevron_right.style.display = 'none';

    focus.addEventListener('mouseenter', function () {
        chevron_left.style.display = 'block';
        chevron_right.style.display = 'block';
        clearInterval(tiemr);
        tiemr = null;
    });
    focus.addEventListener('mouseleave', function () {
        chevron_left.style.display = 'none';
        chevron_right.style.display = 'none';
        tiemr = setInterval(function () {
            chevron_right.click();
        }, 2000);
    });

    // 根据图片数量动态生成小圈圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.indicators');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        // 记录当前小圆圈的索引号
        li.setAttribute('index', i);
        ol.appendChild(li);
        // 4 小圈圈的排他思想 
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {

                ol.children[i].className = '';
            }
            this.className = 'active';

            // 点击小圆圈 移动图片 移动图片ul 小圆圈的索引号*图片的宽度
            var index = this.getAttribute('index');
            num = index;
            cit = index;
            var focusWidth = focus.offsetWidth;
            console.log(focusWidth);
            // console.log(index);
            animer(ul, -index * focusWidth);

        })
    }
    ol.children[0].className = 'active';

    // 6 克隆第一张 放在ul最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    // 7点击右侧按钮 图片滚动
    var num = 0; // 控制图片滚动
    var cit = 0  // 控制小圆圈
    chevron_right.addEventListener('click', function () {
        num++;
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        animer(ul, -num * focusWidth);

        //每次点击右侧让小圆圈++
        cit++;
        // 克隆图片多一张
        if (cit == ol.children.length) {
            cit = 0;
        }
        circleChange();
    })

    // 左侧按钮
    chevron_left.addEventListener('click', function () {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animer(ul, -num * focusWidth);

        //每次点击右侧让小圆圈++
        cit--;
        // 克隆图片多一张
        if (cit < 0) {
            cit = ol.children.length - 1;
        }
        circleChange();
    })
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[cit].className = 'active';
    }

    // 自动播放
    var tiemr = setInterval(function () {
        chevron_right.click();
    }, 2000);
})